<template>
  <el-calendar ref="calendar">
    <template #header="{ date }">
      <span>{{ date }}</span>
      <el-select v-model="dataForm.machineId" placeholder="选择机器" @change="changeMachine" clearable>
        <el-option v-for="item in machineList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-month')">
          上个月
        </el-button>
        <el-button size="small" @click="selectDate('today')">今天</el-button>
        <el-button size="small" @click="selectDate('next-month')">
          下个月
        </el-button>
      </el-button-group>
    </template>
    <template #date-cell="{ data }">
      <el-text style="font-size: large">
        {{ data.day.split("-").slice(1).join("-") }}
      </el-text>
      <br/>
      <el-text v-for="appoint in appointList">
        <el-text @click="appointInfoHandle(appoint.time)" type="primary" v-if="appoint.time == data.day">
          {{ appoint.count / 2 }}小时
        </el-text>
      </el-text>
    </template>
  </el-calendar>
  <home-time ref="homeTimeRef"></home-time>
</template>

<style scoped>
.mod-home {
  line-height: 1.5;
}
</style>
<script setup lang="ts">
import {reactive, ref} from "vue";
import baseService from "@/service/baseService";
import type {CalendarDateType, CalendarInstance} from "element-plus";
import {ElText} from "element-plus";
import HomeTime from "@/views/home-time.vue";

const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};

const homeTimeRef = ref();
const machineList = ref<any[]>([]);

const dataForm = reactive({
  machineId: ""
});
const appointInfoHandle = (dateTime: any) => {
  homeTimeRef.value.showAppoint(dateTime);
};

const appointList = ref<any[]>([]);
// 获取项目列表
const getMachineList = async () => {
  const res = await baseService.get("/yckj/machine/list");
  machineList.value = res.data;
};
// 获取项目列表
const getAppointList = async () => {
  const res = await baseService.get("/yckj/order/appoints", {
    machineId: dataForm.machineId
  });
  appointList.value = res.data;
};

const changeMachine = (value: any) => {
  dataForm.machineId = value;
  getAppointList();
};
const init = async () => {
  await getMachineList();
  await getAppointList();
};
init();
</script>
